<template>
    <div class='register-container'>
        <div class="register-info">

            <!-- 头部 -->
            <div class="register-tip">
                <div class="register-head">
                    <div class="r-h-left">
                        <img src="../../assets/logo.png" alt="" @click="()=>{this.$router.push({path: '/'})}"> 
                    </div>
                    <div class="welcome-register">
                        <span>更新邮箱</span>
                    </div>
                    <div class="to-login-page">
                        <span>
                            回首页-
                            <a href="/">首页></a>
                        </span>
                    </div>
                </div>
            </div>

            <!-- 主要的 -->
            <div class="register-body">
                <div class="r-b-container">
                    <div class="step-tip">
                        <el-steps :active="active" finish-status="success">
                            <el-step title="验证邮箱号"></el-step>
                            <el-step title="填写新邮箱"></el-step>
                            <el-step title="更新完成"></el-step>
                        </el-steps>

                        <div class="active-1" v-if="active == 1">
                            <div>
                                <span>邮箱</span>
                                <input type="email" v-model="email">
                            </div>

                            <div>
                                <span @click="sendEmail()" class="click-send-captcha">发送验证码</span>
                                <input type="text" v-model="captcha">
                            </div>
                            <div class="next" @click="registerNext()">
                                <span>
                                    下一步
                                </span>
                            </div>
                        </div>
                        <div class="active-2" v-if="active == 2">
                            <div>
                                <span>邮箱</span>
                                <input type="text" v-model="email1">
                            </div>
                            <div>
                                <span>重复邮箱</span>
                                <input type="text" v-model="reEmail">
                            </div>
                            <div class="next" @click="registerNext()">
                                <span>
                                    下一步
                                </span>
                            </div>
                        </div>
                        <div class="active-3" v-if="active == 3">
                            <div style="color: #67c23a">
                                <span>更新成功 :</span>
                            </div>
                            <div class="next">
                                <span style="padding: 15px 207px" @click="to_()">
                                    前往首页
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 尾部 -->
            <div class="register-tail">

            </div>
        </div>
    </div>
</template>
<script>
// 导入组件
import axios from 'axios'
import { isEmail } from "../../utils/validate"
import getUUID from "../../utils/uuid"
import md5 from 'js-md5'
// 导出模块
export default {
    // 模块名字
    name: 'register',
    // 模块数据
    data() {
        //数据  
        return {
            active: 1,
            email: "",
            account: "",
            email1: "",
            reEmail: "",
            captcha: "",
            uuid: "",
            memberVo: [],
            updateEmailVo: {
                id: '',
                newEmail: '',
                oldEmail: ''
            }
        };
    },


    // 里面的函数只有调用才会执行（实时计算）里面是定义的方法
    methods: {
        to_() {
            this.$router.push({ path: '/' })
        },

        // 发送验证码
        sendEmail() {
            if (this.email == "") {
                this.$message({
                    type: "waring",
                    message: "邮箱不能为空"
                })
                return false;
            }
            if (!isEmail(this.email)) {
                this.$message({
                    type: "waring",
                    message: "邮箱格式错误"
                })
                return false;
            }
            this.uuid = getUUID();
            // 给后台发送数据
            this.$http({
                url: this.$http.adornUrl(`/shitou-member/shitoumember/captcha/sendCheckEmail?uuid=${this.uuid}&email=${this.email}&id=${this.memberVo.id}`),
                method: 'post'
            }).then(({ data }) => {
                if (data.code == 200) {
                    this.$message({
                        type: 'success',
                        message: '发送验证码成功,请注意查收'
                    })
                } else {
                    this.$message({
                        type: 'waring',
                        message: data.message
                    })
                }
            })
        },

        // 邮箱验证码校验
        checkCaptcha() {
            let che = {
                "uuid": this.uuid,
                "email": this.email,
                "captcha": this.captcha
            }
            // 请求后台, 进行验证码对比
            this.$http({
                url: this.$http.adornUrl(`/shitou-member/shitoumember/captcha/validateEmailCatpcha?uuid=${this.uuid}&email=${this.email}&captcha=${this.captcha}`),
                method: 'get'
            }).then(({ data }) => {
                if (data.code == 200) {
                    this.active = this.active + 1
                } else {
                    this.$message({
                        type: 'warning',
                        message: "验证码错误"
                    })
                }
            })
        },

        // 校验邮箱以及验证码
        checkEmail() {
            if (this.email == '') {
                this.$message({
                    type: 'warning',
                    message: "邮箱不能为空"
                })
                return;
            }
            this.checkCaptcha()
        },


        // 校验两次邮箱输入是否一样
        chekcTowEmail() {
            // 两次邮箱对比
            if (this.email1 == this.reEmail) {
                return true
            }
            return false
        },

        // 更新邮箱
        updateEmail() {
            this.updateEmailVo.oldEmail = this.email;
            this.updateEmailVo.newEmail = this.reEmail
            // 更新操作
            this.$http({
                url: this.$http.adornUrl("/shitou-member/shitoumember/member/updateEmail"),
                method: 'post',
                data: this.$http.adornData(this.updateEmailVo)
            }).then(({ data }) => {
                if (data.code == 200) {
                    this.active = this.active + 1;
                    this.$message({
                        type: 'success',
                        message: '更新成功',
                    })
                }
            })
        },

        // 校验是否可以下一步
        registerNext() {
            if (this.active < 3) {
                if (this.active < 2) {
                    this.checkEmail();
                } else {
                    if (this.chekcTowEmail()) {
                        // 调用方法
                        this.updateEmail();
                    }
                }
            }
        }
    },
    async created() {
        this.memberVo = await this.$memberInfo()
        if (this.memberVo == null) {
            this.$message({
                type: 'warning',
                message: '会员未登录'
            })
            return;
        }
        this.updateEmailVo.id = this.memberVo.id;
    }

};
</script>

<style scoped>
@import url("../../utils/css/register.css");
</style>